<template>
    <div class="tags-menu-con">
        <el-scrollbar>
            <div class="tags-menu-con1">
                <div class="tag-i" :class="{ active: props.active === tag.name }" v-for="(tag, index) in props.value" :key="index" @click="clickTag(tag)">
                    {{ tag.meta.title }}
                    <el-icon @click.stop="handleClose(tag)" style="margin-left: 8px;" :size="12" v-if="props.value.length > 0 && tag.name !== 'home'"><Close /></el-icon>
                </div>
            </div>
        </el-scrollbar>

    </div>
</template>

<script setup name="Tag">

const props = defineProps({
    value: {
        required: true,
        type: Array
    },
    active: {
        required: true,
        type: String
    }
});
const emit = defineEmits(['emitTags']);

function clickTag(tag) {
    emit('emitTags', tag, 'click')
}

function handleClose(tag) {
    emit('emitTags', tag, 'del')
}

</script>

<style scoped lang="scss">
.tags-menu-con {
    width: 100%;
    background-color: #fff;
    // padding: 10px 8px;

    .tags-menu-con1 {
        width: 100%;
        display: flex;
    }

    .tag-i{
        flex-shrink: 0;
        cursor: pointer;
        width: auto;
        padding: 8px 10px;
        font-size: 12px;
        border-right: 1px solid #ececec;
        display: flex;
        align-items: center;
        color: #999;
        &.active {
            color: #409eff;
            background: #ecf5ff;
        }
    }

}
</style>